import React from 'react';
import { CameraOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import TypingBox from '@/components/TypingBox';
import Transition from '@/components/Transition';
import avatar from "@/assets/images/avatar.jpg";
import './index.css';
class Banner extends React.Component {
  constructor() {
    super();
    this.state = {
      userInfo: {
        userName: 'Kevin',
        avatar,
        dayword:
          'All that matters is knowing what you really want and going after it.',
      },
    };
  }
  render() {
    return (
      <div className='banner'>
        <div className='avatar'>
          <Transition animation='animate__animated animate__zoomIn'>
            {this.state.userInfo.avatar ? (
              <Avatar size={90} src={this.state.userInfo.avatar}></Avatar>
            ) : (
              <Avatar size={90} icon={<CameraOutlined />}>
                {this.state.userInfo.userName.substring(0, 1)}
              </Avatar>
            )}
          </Transition>
        </div>
        <div className='name'>
        <Transition animation='animate__animated animate__fadeInLeft'>{this.state.userInfo.userName}`s Blog
        </Transition>
        </div>
        <div className='word'>
          <TypingBox msg={this.state.userInfo.dayword}></TypingBox>
        </div>
      </div>
    );
  }
}
export default Banner;
